<template>
  <div class="register">
    <router-link to="/login" class="gologin" tag="span">
      <i class="el-icon-arrow-left"></i>login
    </router-link>

    <router-link to="/register" class="goretrieve" tag="span">
      register<i class="el-icon-arrow-right"></i>
    </router-link>

    <el-form
      status-icon
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <h2>RETRIEVE</h2>
      <el-form-item prop="email" label="邮箱">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="重置密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="username" label="用户名">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>

      <el-form-item class="yzm" prop="yzmval">
        <el-input
          class="yzminput"
          v-model="ruleForm.yzmval"
          placeholder="请输入验证码"
        ></el-input>
        <input
          type="button"
          value="获取邮箱验证码"
          class="verify"
          @click="getyzm"
          v-if="isS"
        />
        <input
          @click="getyzm"
          type="button"
          :disabled="isDisable"
          :value="number == 60 ? '获取邮箱验证码' : countDown"
          class="verify"
          v-else
        />
      </el-form-item>
      <el-form-item class="fixcenter p-r">
        <el-button type="button" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isS: true,
      number: 60,
      yzm: "",
      yzmval: "",
      isDisable: true,
      ruleForm: {
        password: "",
        checkPass: "",
        username: "",
        email: "",
        yzmval: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入正确的邮箱", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
        checkPass: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
        yzmval: [
          { required: true, message: "请输入正确的验证码", trigger: "blur" },
          { min: 0, max: 5, message: "长度不对", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    countDown() {
      return this.number + "秒后可重新发送";
    },
  },
  methods: {
    //延时函数
    setTime(obj) {
      if (this.number == 0) {
        this.isDisable = false;
        this.number = 60;
        return;
      } else {
        this.number--;
        // console.log(this.number)
      }
      setTimeout(() => {
        this.setTime(obj);
      }, 1000); //每1000毫秒执行一次
    },

    //获取验证码
    async getyzm() {
      let data = await this.$http.get(
        `register/postmail?email=${this.ruleForm.email}`
      );
      if (data.status == 200) {
        this.isS = false;
        this.isDisable = true;
        this.setTime(this.number);
      } else {
        this.$message.error(data.data.message);
      }
    },

    //提交重置密码
    submitForm(formName) {
      this.isS = true;
      this.isDisable = false;
      if (this.ruleForm.password !== this.ruleForm.checkPass) {
        return this.$message.error("两次密码不一致");
      }
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // console.log(this)
          let data = await this.$http.post("register/getpassword", this.ruleForm);
          console.log(data);
          if (data.status == 200) {
            this.$message.success("密码修改成功，前往登录");
            this.$router.push("/");
            return;
          }
          this.$message.success(data.message);
        } else {
          this.$message.error(data.data.message);
        
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.register {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  border: 1px solid #333;
  padding: 30px;
  padding-bottom: 20px;
  box-shadow: 0 10px 10px #333;
  .gologin {
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    &:hover {
      color: #35affb;
    }
  }
  .goretrieve {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    &:hover {
      color: #35affb;
    }
  }
}
h2 {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}
.yzm {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-left: 30px;
  .yzminput {
    width: 120px;
  }
}

.verify {
  width: 120px;
  height: 40px;
  margin-left: 10px;
}

.p-r {
  padding-right: 60px;
}
</style>